<template>
  <div>

    <div
      v-if="grade_show"
      style="float:left;width: 500px;padding-bottom: 30px"
    >

    </div>
    <div class="clearfix"></div>
    <div
      v-if="dis_subject_gradeone"
      style="width: 800px;height: 600px"
    >
      <chart
        :options="subject_gradeone"
        autoresize
      />
    </div>
    <div
      v-if="dis_subject_gradetwo"
      style="width: 800px;height: 600px"
    >
      <chart
        :options="subject_gradetwo"
        autoresize
      />
    </div>
    <div
      v-if="dis_subject_gradethree"
      style="width: 800px;height: 600px"
    >
      <chart
        :options="subject_gradethree"
        autoresize
      />
    </div>
  </div>
</template>

<style>
  /**
   * The default size is 600px×400px, for responsive charts
   * you may need to set percentage values as follows (also
   * don't forget to provide a size for the container).
   */
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

// import the styles

export default {
  components: {
    'chart': ECharts
  },
  data () {
    return {
      grade_value: [],
      typeid: '',
      grade_show: true,
      dis_subject_gradeone: true,
      dis_subject_gradetwo: true,
      dis_subject_gradethree: true,
      autoresize: true,

      subject_gradeone: {

        title: {
          text: '全市师资力量统计',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        color: ['#3398DB'],
        grid: {
          left: '10%',
          bottom: '35%'
        },
        xAxis: {
          type: 'category',

          axisLabel: {
            interval: 0,
            formatter: function (value) {
              return value.split('').join('\n')
            }

          },
          data: ['越秀区', '荔湾区', '海珠区', '天河区', '白云区', '黄埔区', '增城区', '花都区', '从化区', '番禺区', '南沙区']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [3432, 2512, 3257, 4123, 4029, 1176, 2095, 1420, 1179, 3987, 1347],
          type: 'bar',
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }

          }
        }]
      }
    }
  },
  methods: {

  }
}
</script>
